<template>
  <scroll-view class="scroll-container" scroll-y="true">
    <!-- 1. 轮播图（修复swiper-item key，避免重复） -->
    <swiper class="swiper" autoplay="true" interval="3000" circular="true">
      <swiper-item v-for="(img, idx) in swiperImages" :key="'swiper-' + idx">
        <image :src="img" class="swiper-img" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 2. 城市介绍（简化标签嵌套，避免层级冲突） -->
    <view class="section">
      <text class="section-title">泉州介绍</text>
      <view class="intro-content">
        <text class="intro-title">海上丝绸之路起点 - 泉州</text>
        <text class="intro-p">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</text>
        <text class="intro-p">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
        <!-- 简化蓝色文字：直接用text标签+内联样式，无嵌套冲突 -->
        <text class="intro-p">特色文化：拥有</text>
        <text class="intro-p blue-text">南音</text>
        <text class="intro-p">、</text>
        <text class="intro-p blue-text">木偶戏</text>
        <text class="intro-p">和</text>
        <text class="intro-p blue-text">闽南建筑</text>
        <text class="intro-p">等丰富的非物质文化遗产。</text>
      </view>
    </view>

    <!-- 3. 探索进度（简化绑定语法） -->
    <view class="section">
      <text class="section-title">探索进度</text>
      <view class="progress-group">
        <text class="progress-txt">当前进度: {{ progressPercent }}%</text>
        <view class="progress-bar-wrap">
          <view class="progress-bar" :style="{width: progressPercent + '%'}"></view>
        </view>
        <text class="progress-percent">{{ progressPercent }}%</text>
      </view>
    </view>

    <!-- 4. 城市选择（修复picker数据格式，避免渲染错误） -->
    <view class="section">
      <text class="section-title">选择城市</text>
      <picker
        mode="multiSelector"
        :range="cityRange"
        :value="cityIndex"
        @change="changeCity"
      >
        <view class="picker-btn">{{ selectedCity }}</view>
      </picker>
    </view>

    <!-- 5. 宣传视频（添加默认封面，避免加载空白） -->
    <view class="section">
      <text class="section-title">泉州宣传视频</text>
      <video :src="videoSrc" class="video-player" controls="true" :poster="swiperImages[0]"></video>
    </view>

    <!-- 6. 背景音乐（简化音频初始化，避免对象异常） -->
    <view class="section">
      <text class="section-title">泉州背景音乐</text>
      <view class="audio-wrap">
        <button type="primary" @click="toggleAudio">
          {{ isPlaying ? '暂停' : '播放' }}
        </button>
        <text class="audio-desc">当前播放：泉州南音 - 传统乐曲</text>
        <slider
          v-model="audioProgress"
          min="0"
          max="100"
          @change="setAudioProgress"
          class="audio-slider"
        ></slider>
      </view>
    </view>

    <!-- 7. 偏好设置（探索半径：极简实现，确保滑动生效） -->
    <view class="section">
      <text class="section-title">偏好设置</text>
      <view class="pref-item">
        <text>出行方式：</text>
        <radio-group @change="changeTravelMode">
          <radio :value="mode" :checked="travelMode === mode" v-for="(mode, idx) in travelModes" :key="'mode-' + idx">{{ mode }}</radio>
        </radio-group>
      </view>
      <view class="pref-item">
        <text>显示推荐景点：</text>
        <switch v-model="showRecommend"></switch>
      </view>
      <!-- 探索半径：剔除复杂逻辑，只保留核心绑定 -->
      <view class="pref-item radius-item">
        <text>探索半径: {{ sliderValue }}km</text>
        <slider 
          v-model="sliderValue" 
          min="0" 
          max="70" 
          @changing="sliderValue = e.detail.value"
          class="radius-slider"
        ></slider>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      swiperImages: [
        '/static/quanzhou/city1.png',
        '/static/quanzhou/city2.jpg',
        '/static/quanzhou/city3.jpg'
      ],
      cityRange: [
        ['福建省', '浙江省', '广东省'],
        ['泉州市', '福州市', '杭州市', '广州市'],
        ['丰泽区', '鲤城区', '台江区', '上城区', '天河区']
      ],
      cityIndex: [0, 0, 0],
      selectedCity: '福建省 - 泉州市 - 丰泽区',
      travelModes: ['公交', '自驾', '步行'],
      travelMode: '公交',
      showRecommend: true,
      sliderValue: 35,
      videoSrc: '/static/quanzhou/city-video.mp4',
      audioObj: null,
      isPlaying: false,
      audioProgress: 0,
      progressPercent: 60
    };
  },
  onReady() {
    // 简化音频初始化，避免事件绑定异常
    this.audioObj = new Audio('/static/quanzhou/city-music.mp3');
  },
  onUnload() {
    // 简化音频销毁，避免空对象报错
    if (this.audioObj) {
      this.audioObj.pause();
      this.audioObj = null;
    }
  },
  methods: {
    changeCity(e) {
      const val = e.detail.value;
      this.cityIndex = val;
      this.selectedCity = `${this.cityRange[0][val[0]]} - ${this.cityRange[1][val[1]]} - ${this.cityRange[2][val[2]]}`;
    },
    changeTravelMode(e) {
      this.travelMode = e.detail.value;
    },
    toggleAudio() {
      // 简化播放逻辑，避免判断异常
      if (!this.audioObj) return;
      if (this.isPlaying) {
        this.audioObj.pause();
        this.isPlaying = false;
      } else {
        this.audioObj.play();
        this.isPlaying = true;
      }
    },
    setAudioProgress(e) {
      if (this.audioObj && this.audioObj.duration) {
        this.audioObj.currentTime = (e.detail.value / 100) * this.audioObj.duration;
        this.audioProgress = e.detail.value;
      }
    }
  }
};
</script>

<style scoped>
/* 基础样式：确保布局不塌陷 */
.scroll-container {
  height: 100vh;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

/* 轮播图：确保显示 */
.swiper {
  height: 200px;
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
}
.swiper-img {
  width: 100%;
  height: 100%;
}

/* 章节样式：确保区块显示 */
.section {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 12px;
}

/* 介绍文本：确保文字显示 */
.intro-content {
  font-size: 14px;
  color: #666;
  line-height: 22px;
}
.intro-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  display: block;
  margin: 10px 0;
}
.intro-p {
  display: inline;
  margin-right: 4px;
}
/* 蓝色文字：直接定义，优先级最高 */
.blue-text {
  color: #007aff !important;
  font-weight: 500;
}

/* 视频：确保显示 */
.video-player {
  width: 100%;
  height: 220px;
  margin-top: 5px;
  border-radius: 4px;
}

/* 音频区域：确保布局 */
.audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.audio-desc {
  font-size: 14px;
  color: #666;
}
.audio-slider {
  width: 100%;
  margin-top: 5px;
}

/* 进度条：确保显示 */
.progress-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.progress-txt {
  font-size: 14px;
  color: #666;
}
.progress-bar-wrap {
  height: 6px;
  background-color: #e5e5e5;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background-color: #007aff;
}
.progress-percent {
  font-size: 14px;
  color: #666;
  align-self: flex-end;
}

/* 城市选择器：确保显示 */
.picker-btn {
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  margin-top: 10px;
}

/* 偏好设置：确保布局 */
.pref-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
}
.pref-item radio {
  margin-right: 8px;
}
/* 探索半径：确保布局 */
.radius-item {
  justify-content: space-between;
  align-items: center;
}
.radius-slider {
  width: 60%;
  margin-left: 10px;
}
</style>